<script>
import KCard from '@/components/KCard'
import Course from '@/views/train/course.vue'
export default {
  components: {
    Course,
    KCard
  },
  props: {
    data: {
      type: Array,
      required: true,
      default() {
        return []
      }
    },
    loading: {
      type: Boolean
    }
  },
  data() {
    return {

    }
  },
  methods: {
    handleSkip(item) {
      const { key } = item
      console.log('item--------->', item)
      switch (key) {
        case 'employee':
          this.$router.push({ path: '/personnel/files', query: { job_status: 1 }})
          break
        case 'waiting_for_depart':
          this.$router.push({ path: '/personnel/files', query: { job_status: 0 }})
          break
        case 'waiting_for_transfer':
          this.$router.push({ path: '/personnel/files', query: { identity: 1 }})
          break
        case 'waiting_to_be_regular_worker':
          this.$router.push({ path: '/personnel/files', query: { identity: 1 }})
          break
      }
    }
  }
}
</script>

<template>
  <KCard
    v-loading="loading"
    title="员工概况"
    body-classes="employee-overview"
  >
    <el-row type="flex" :gutter="40" style="flex-wrap: wrap;">
      <el-col
        v-for="(item,index) in data"
        :key="item.key"
        style="margin-top: 16px;"
        class="col-container"
        :xs="12"
        :sm="12"
        :md="6"
        :lg="4"
      >
        <div
          class="statistic-item"
          @click="handleSkip(item)"
        >
          <svg-icon :icon-class="item.icon" class="icon" />
          <div class="info-container">
            <div class="value">{{ item.value }}</div>
            <div class="label">{{ item.label }}</div>
          </div>
        </div>
      </el-col>
    </el-row>
  </KCard>
</template>

<style lang="scss">
.employee-overview{
    // display: flex;
    // flex-wrap: wrap;
    // align-items: center;
    // margin-top: 30px;

    .col-container {
        flex-grow: 1;
        border-left: 1px solid #f5f5f5;
        &:first-child {
            border-left: none;
        }
        .statistic-item {
            display: flex;
            flex-wrap: nowrap;
            cursor: pointer;
            // padding: 0 0 0 50px;
            // border-left: 1px solid #F5F5F6;

            &:first-child {
                border-left: none;
            }

            > .icon {
                width: 60px;
                height: 60px;
            }

            > .info-container {
                margin-left: 16px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                color: #3D3D3D;

                >.label {
                    font-size: 14px;
                }

                >.value {
                    font-size: 24px;
                    font-weight: bold;
                }
            }
        }
    }
}
</style>
